<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞马云监控平台</title>

    <link rel="stylesheet" type="text/css" href="/css/vendor/cloud-monitor-platform-home.css">
    <link rel="stylesheet" type="text/css" href="/css/ecalendar.css"/>
</head>
<body>

<!-- 地图显示块 -->
<div style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;">
    <div id="google-map-container" style="position: relative; width: 100%; height: 100%;"></div>
</div>

<!-- 顶部状态栏 -->
<div class="status-bar">
    <img style="position: absolute; left: 34px; top: 8px;" src="/images/stat/logo.png">
    <section style="position: absolute; left: 150px; font-size: 1.2em; line-height: 60px;">云监控平台</section>

    <img class="status-bar-icon" style="right: 490px;" src="/images/stat/flight_count.png"/>
    <section class="status-bar-text" style="right: 318px;"><?php echo $detail['totalMission'] ?></section>
    <img class="status-bar-icon" style="right: 224px;" src="/images/stat/flying_count.png"/>
    <section class="status-bar-text" style="right: 50px;" id="current-flying">0</section>
    <img id="multi-screen-btn" onMouseDown="clickMultiScreen()" src="/images/stat/multi_screen.png"/>
    <label onClick="clickMultiScreen()" style="width: 28px; text-align: center; position: absolute; right: 24px; bottom: 4px; font-size: 0.6em; font-weight: 300;">多屏</label>
</div>

<!--信息菜单开关-->
<div class="info-toggle-container">
    <div onClick="clickInfoMenuToggle(this)" class="info-toggle">
        <img id="info-toggle-icon" src="/images/stat/info_toggle.png"/>
    </div>
</div>

<!-- 信息菜单 -->
<div id="info-container">
    <div class="info-title-container">
        <div class="info-seperate-line"></div>
        <section id="info-title-left" style="left: 70px;" onClick="clickInfoLeftItem()" class="info-selected-state">
            统计信息
        </section>
        <section id="info-title-right" style="right: 70px;" onClick="clickInfoRightItem()">任务列表</section>
    </div>

    <div id="info-mission-menu-container" style="display: none">
        <div class="info-filter-container">
            <div style="width: 100%; height: 44px;">
                <input name="info-area" class="info-area-input" placeholder="任务名称" id="search-task-name" type="text"/>
                <img onClick="searchMission()" src="/images/stat/search.png"
                     style="position: absolute; right: 5px; top: 3px;">
            </div>
            <div class="info-filter-selection-container">
                最近 :
                <input type="radio" name="filter-duration-from-now" value="one-week" id="filter-one-week">
                <label for="filter-one-week" style="margin-left: 10px;">一周</label>
                <input type="radio" name="filter-duration-from-now" value="one-month" id="filter-one-month">
                <label for="filter-one-month" style="margin-left: 15px;">一月</label>
                <input type="radio" name="filter-duration-from-now" value="all" id="filter-all" checked>
                <label for="filter-all" style="margin-left: 15px;">全部</label>
            </div>
            <div class="info-filter-selection-container">
                <div class="info-filter-selection-title">时间段 :</div>
                <div class="info-filter-selection-item" style="left: 64px;" id="time_start">开始&nbsp;
                    <img class="info-filter-toggle-icon" src="/images/stat/filter_toggle.png"/>
                </div>
                <div class="info-filter-selection-item" style="left: 168px;" id="time_end">今天&nbsp;
                    <img class="info-filter-toggle-icon" src="/images/stat/filter_toggle.png"/>
                </div>
            </div>
        </div>

        <div id="info-mission-list-container">
            <!-- 这里动态添加菜单的任务信息 -->
        </div>
    </div>

    <div id="info-statistics-container">
        <div class="data-item">
            <label class="name">总里程 (km)</label>
            <label class="value" style="color: #24d16d;"><?php echo $detail['totalMil'] ?></label>
        </div>
        <div class="data-item">
            <label class="name">总面积 (km&sup2;)</label>
            <label class="value" style="color: #a71965;"><?php echo !empty($work_areas) ? $work_areas : 0 ?></label>
        </div>
        <div class="data-item">
            <label class="name">总时长 (hr)</label>
            <label class="value" style="color: #e8b904;"><?php echo !empty($work_times) ? $work_times : 0 ?></label>
        </div>
        <div class="data-item">
            <label class="name">飞机总量 (架)</label>
            <label class="value" style="color: #00bcfb;" id="show-planeCount"><?php echo $detail['totalPlane'] ?></label>
            <label class="name" style="left: 190px;">本月新增 (架)</label>
            <label class="value" style="left: 190px; color: #e75e03;" id="plane-month-add">0</label>
        </div>
        <div style="height: 8px;"></div>
        <div class="data-item chart-container">
            <label class="name">飞行数据统计(近6个月)</label>
            <label class="detail-btn" onClick="clickShowStatisticsDetail('flight-data')">详细 >></label>
            <canvas id="flight-data-preview-chart" class="chart" width="290px" height="190px"></canvas>
        </div>
        <div class="data-item chart-container">
            <label class="name">飞机架次统计(近6个月)</label>
            <label class="detail-btn" onClick="clickShowStatisticsDetail('flight-count')">详细 >></label>
            <canvas id="flight-count-preview-chart" class="chart" width="290px" height="190px"></canvas>
        </div>
        <div style="height: 12px;"></div>
    </div>
</div>


<!-- 测区信息 -->
<div id="mission-info-map" style="display: none;visibility:hidden">
    <div class="zone-info-container">
        <section
            style="height: 30px; line-height: 30px; padding-left: 18px; font-weight: 200; font-size: 0.9em; background-color: black; color: white;">
            任务信息
        </section>
        <img style="position: absolute; right: 10px; top: 8px;" id="btn-close-info-window" onclick="closeInfoWindow()" src="/images/stat/close_btn.png">
        <img style="width: 100%;" src="/images/stat/plane_F200.png" id="block-image-plane-type">
        <section class="drone-info">飞机型号 :
            <item id="task-plane-type"></item>
        </section>
        <section class="drone-info">飞机编号 :
            <item id="task-drone-serial"></item>
        </section>
        <section class="drone-info">联系电话 :
            <item id="task-drone-contact"></item>
        </section>
        <section style="height: 2px; width: 100%; margin: 10px 0px; background-color:#BDBDBD;"></section>

        <div class="zone-info-box">
            <section style="margin-left: 14px; font-size: 0.9em;" id="block-name"></section>
            <div class="zone-info-project-detail" style="height: 104px;">
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">飞机型号</li>
                    <li class="zone-info-project-item-li">相机类型</li>
                    <li class="zone-info-project-item-li">GSD</li>
                    <li class="zone-info-project-item-li">航向重叠</li>
                    <li class="zone-info-project-item-li">海拔高度</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-plane-type"></li>
                    <li class="zone-info-project-item-li" id="block-camera-type"></li>
                    <li class="zone-info-project-item-li" id="block-gsd">0cm</li>
                    <li class="zone-info-project-item-li" id="block-longitudinal-overlap">0%</li>
                    <li class="zone-info-project-item-li" id="block-flight-altitude">0m</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">比例尺</li>
                    <li class="zone-info-project-item-li">旁向重叠</li>
                    <li class="zone-info-project-item-li">飞行高度</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-work-scale"></li>
                    <li class="zone-info-project-item-li" id="block-lateral-overlap">0%</li>
                    <li class="zone-info-project-item-li" id="block-flight-relative-altitude">0m</li>
                </ul>
            </div>
            <div class="zone-info-project-detail" style="height: 54px; margin-top: 12px;">
                <section style="padding-left: 4px;">最高点</section>
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">GSD</li>
                    <li class="zone-info-project-item-li">航向重叠</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-high-gsd">0cm</li>
                    <li class="zone-info-project-item-li" id="block-high-longitudinal-overlap">0%</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">海拔高度</li>
                    <li class="zone-info-project-item-li">旁向重叠</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-survey-highest-altitude">0m</li>
                    <li class="zone-info-project-item-li" id="block-high-lateral-overlap">0%</li>
                </ul>
            </div>
            <div class="zone-info-project-detail" style="height: 32px; margin-top: 14px;">
                <section style="padding-left: 4px;">最低点</section>
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">GSD</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-low-gsd">0cm</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">海拔高度</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-survey-lowest-altitude">0m</li>
                </ul>
            </div>
            <section class="zone-info-project-detail">
                <section class="zone-info-separate-line" style="left: 20px;"></section>
            </section>
            <div class="zone-info-project-detail" style="height: 46px;">
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">航线间距</li>
                    <li class="zone-info-project-item-li">默认空速</li>
                    <li class="zone-info-project-item-li">预计面积</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-flight-interval">0m</li>
                    <li class="zone-info-project-item-li" id="block-default-air-speed">0m/s</li>
                    <li class="zone-info-project-item-li">
                        <item id="block-work-area"></item>
                        km&sup2;</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">拍照间距</li>
                    <li class="zone-info-project-item-li">预计时间</li>
                    <li class="zone-info-project-item-li">预计里程</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-take-pic-interval">0m</li>
                    <li class="zone-info-project-item-li" id="block-work-time">0min</li>
                    <li class="zone-info-project-item-li" id="block-work-mileage">0km</li>
                </ul>
            </div>
        </div>
        <div class="play-button" id="block-play-button" onMouseDown="clickPlayMission()">
            <img style="position: relative; top: 2px;" src="/images/stat/play_btn.png">&nbsp;<span id="block-play-button-text">任务回放</span>
        </div>
    </div>
</div>


<div style="display: none">
    <div id="missionList"><?php echo $missionList ?></div>
    <div id="useMissionList"><?php echo $useMissionList ?></div>
    <div id="isGeted"><?php echo $isGeted ?></div>
    <div id="chartDate"><?php echo $chartDate ?></div>
    <div id="useTime"><?php echo $useTime ?></div>
    <div id="milTimes"><?php echo $milTimes ?></div>
    <div id="start-time"><?php echo !empty($startDate) ? $startDate : '' ?></div>
    <div id="end-time"><?php echo !empty($endDate) ? $endDate : '' ?></div>
    <div id="mil-total"><?php echo !empty($milTotal) ? $milTotal : '' ?></div>
    <div id="fsTotal"><?php echo !empty($fsTotal) ? $fsTotal : '' ?></div>
</div>

</body>

<!-- 加载JS脚本 -->

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/validator.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/zone-manager.js"></script>

<script type="text/javascript" src="http://maps.google.cn/maps/api/js?key=AIzaSyDOMhmWUde8faeEPDk1_OamryGNdBCzXEc"></script>

<script type="text/javascript" src="/js/markerclusterer.js"></script>
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/google-map-manager.js"></script>

<script type="text/javascript" src="/js/vendor/statistics/flight-statistics-preview-chart.js"></script>
<script type="text/javascript" src="/js/vendor/statistics/flight-statistics-chart.js"></script>>
<script type="text/javascript" src="/js/vendor/statistics/cloud-monitor-platform-home.js"></script>
<script type="text/javascript" src="/js/vendor/statistics/stat-cloud.js"></script>
</html>










